<template>
  <div class="detail">
    <!-- 详情页<go-back></go-back>
    <div>
      <button @click="$router.back()">返回</button>
    </div>
    <div>
      <button @click="$router.go(-1)">返回</button>
    </div> -->
    <!-- 四个导航 -->
    <ul class="guid">
      <li v-for="(item, i) in guid" :key="i">
        {{ item.name }}
      </li>
    </ul>
    <!-- 商品图 -->
    <div class="shopimg">
      <img :src="this.shoplist[0].img" alt="" />
    </div>
    <!-- 简介 -->
    <div class="introduction">
      <div class="duction1">
        <p>
          <span class="duction1a">￥</span>
          <span class="duction1b">{{this.shoplist[0].market_price}}</span>
          <span class="duction1c">￥{{this.shoplist[0].price}}</span>
        </p>
        <div class="duction1d">
          <van-icon name="star-o" color="#FF6040" />
          <span class="duction1e">收藏</span>
        </div>
      </div>

      <p class="duction2">
        <span>溪牧原山茶花洁面泡沫 氨基酸洗面奶 150ML</span>
        <span>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</span>
      </p>
      <div class="duction3">11.11限时299元起</div>
      <p class="duction4">
        <span>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</span>
        <span>查看</span>
      </p>
    </div>
    <!-- jian隔开 -->
    <div class="kong">

    </div>
    <!-- 领券和分期 -->
    <div class="ok">
      <ul>
        <li>
          <div class="ok1">领券</div>
          <div class="ok2">
            <ul class="ok3">
              <li class="ok4">
                <div class="ok41">11</div>
              </li>
              <li class="ok4">
                <div class="ok41">22</div>
              </li>
              <li class="ok4">
                <div class="ok41">33</div>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <div class="ok1">分期</div>
          <div class="ok2">
            <span>可选3/6/12期</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部垫块 -->
    <div class="footkong"></div>
    <!-- 最底部的 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="goCart()"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
import "../assets/css/detail.css";
import { getCartadd, getgoodsinfo } from "../util/request/api";
export default {
  data() {
    return {
      guid: [
        {
          id: 1,
          name: "商品",
        },
        {
          id: 2,
          name: "评价",
        },
        {
          id: 3,
          name: "详情",
        },
        {
          id: 4,
          name: "推荐",
        },
      ],
      shoplist:{}
    };
  },
  // 动态路由接参，记得改变index.js
  mounted() {
    console.log(this.$route, "luyou");
    console.log(this.$route.params, "路由");
    // 获取数据
    getgoodsinfo(this.$route.params)
    .then((res) => {

      console.log(res, "getgoodsinfo");
      this.shoplist = res.list
      console.log(this.shoplist,'this.shoplist');
    });
  },
  methods: {
    goCart() {
      // console.log(authorization );
      // 获取uid
      let obj = JSON.parse(sessionStorage.getItem("isLogin"));
      let uid = obj.uid;
      // 获取authorization
      let authorization = sessionStorage.getItem("isLogin")
        ? JSON.parse(sessionStorage.getItem("isLogin")).token
        : "";
      // 获取商品id
      let goodsid = this.$route.params.id;
      console.log(goodsid,'goodsid');
      let num = 1;
      let a = {
        uid,
        authorization,
        goodsid,
        num,
      };

      console.log(a, "a");
      getCartadd(a).then((res) => {
        console.log(res, "购物车");
      });

      // this.$router 是路由实例化配置对象
      // push会留下历史记录，点击浏览器后退会回到上一个页面
      this.$router.push("/cart");
      // replace，会替换当前历史记录，感觉不会用它
      // this.$router.replace('./order')
    },
  },
  //   进入触发
  // beforeRouteEnter(to, from, next) {
  //   console.log(to, "进入详情页去哪里");
  //   console.log(from, "路由独享从哪里来");
  //   next();
  // },
  //   离开触发
  // beforeRouteLeave(to, from, next) {
  //   console.log(to, "likai进入详情页去哪里");
  //   console.log(from, "likai路由独享从哪里来");
  //   console.log(this, "likai路由独享从哪里来");
  //   next();
  // },
  //   更新,用得少，当动态路由地址发生变化会触发
  // beforeUpdate() {
  //   console.log(to, "更新进入详情页去哪里");
  //   console.log(from, "更新路由独享从哪里来");
  //   console.log(this, "更新路由独享从哪里来");
  //   next();
  // },
};
</script>
<style scoped>
</style>